<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新闻</title>
    <!-- 引入element-ui样式 -->
    <link rel="stylesheet" href="../../../plugins/element-ui/index.css">
    <!--    上传图片样式-->
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
    <!--    走马灯-->
    <style>
        .el-carousel__item h3 {
            color: #475669;
            font-size: 18px;
            opacity: 0.75;
            line-height: 300px;
            margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }
        .el-carousel__container{
            position: relative;
            margin-top: 100px;
            height:700px
        }
    </style>
    <style>
        .box1{
            position: absolute;
            width: 100%;
            height: 180px;
            background-color: black;
            opacity:0.4;
        }

        .box2{
            position: absolute;
            width: 100%;
            height: 180px;
            margin-top: 80px;
            margin-left: 0px;
        }
        .line1{
            width: 100%;
            height: 2px;
            background-color: white;
            margin-top: -830px;
        }

        a{
            text-decoration: none;
        }

        h2:nth-child(2){
            margin: -70px 0 0 300px;
        }
        h2:nth-child(3){
            margin: -31px 0 0 400px;
        }
        h2:nth-child(4){
            margin: -32px 0 0 500px;
        }
        h2:nth-child(5){
            margin: -32px 0 0 630px;
        }
        h2:nth-child(6){
            margin: -32px 0 0 740px;
        }
        h2:nth-child(7){
            margin: -32px 0 0 860px;
        }
    </style>
    <style>
        body{
            background-color: #e6fbbc;
            width: 100%;
            height: 1200px;
        }
    </style>
</head>
<body>
<div id="app">


    <!--导航栏-->
    <div class="box2">
        <div style="position: absolute;margin-top: 0px">
            <img style="margin: -40px 0 0 80px;position: absolute" src="../../img/logo.png"/>
            <h2><a href="../User.html">主页</a></h2>
            <h2><a href="type.html">分类</a></h2>
            <h2><a href="shopCar.html">购物车</a></h2>
            <h2><a href="order.html">订单</a></h2>
            <h2><a href="news.html">新闻</a></h2>
            <h2><a href="updateMyself.html">个人信息</a></h2>
        </div>
    </div>

    <!--    标题div-->
    <div style="position:absolute;margin:160px 0 0 70px;  width: 90%;height: 300px;background-color: #f36bb6">
        <div style="margin:50px 0 0 600px;background-color: black;color:white;width: 150px;height: 45px"><p style="line-height:45px;text-align: center">The pet is with you</p></div>
        <div style="margin: 0 0 0 350px;"><h1>This is your previous purchase record</h1></div>
        <div @click="toType" style="cursor:pointer;margin:0 0 0 600px;background-color: #24b5e1;color:white;width: 150px;height: 60px"><h2 style="line-height:60px;text-align: center">SHOP NOW</h2></div>

    </div>


    <div >
        <el-container style="position:absolute;margin:420px 0 0 450px;height: 800px; ">
        <el-container>
            <div style="width: 100%;position: relative">
                <el-form>
                    <el-form-item style="position:absolute;margin: 50px 0 0 -80px"  label="用户名：" prop="username">
                        <el-input style="width: 250px;" v-model="formData_update.username"></el-input>
                    </el-form-item>

                    <el-form-item style="position:absolute;margin: 150px 0 0 -80px"  label="密码：" prop="password">
                        <el-input style="width: 250px" v-model="formData_update.password"></el-input>
                    </el-form-item>

                    <el-form-item  style="position:absolute;margin: 250px 0 0 -80px" label="姓名：" prop="name">
                        <el-input style="width: 250px" v-model="formData_update.name"></el-input>
                    </el-form-item>


                    <el-form-item   style="position:absolute;margin: 350px 0 0 -80px" label="邮箱：" prop="email">
                        <el-input style="width: 250px" v-model="formData_update.email"></el-input>
                    </el-form-item>

                    <el-form-item  style="position:absolute;margin: 50px 0 0 300px" label="身份证：" prop="idNumber">
                        <el-input style="width: 250px" v-model="formData_update.idNumber"></el-input>
                    </el-form-item>

                    <el-form-item style="position:absolute;margin: 150px 0 0 300px"  label="手机：" prop="phone">
                        <el-input style="width: 250px" v-model="formData_update.phone"></el-input>
                    </el-form-item>

                    <el-form-item style="position:absolute;margin: 250px 0 0 300px" label="照片：" prop="image">

                        <el-upload class="avatar-uploader"
                                   action="/files/uploadFile"
                                   :show-file-list="false"
                                   :on-success="handleAvatarSuccess"
                                   :before-upload="beforeUpload"
                                   ref="upload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </el-form>

                <el-button type="primary" style="position:absolute;margin: 550px 0 0 120px" size="medium " @click="UpdateUsers">确定修改</el-button>
                <el-button type="danger" style="position:absolute;margin: 550px 0 0 250px" size="medium " @click="logout">退出登录</el-button>



            </div>
        </el-container>
    </el-container>
    </div>

</div>




<script src="../../../plugins/vue/vue.js"></script>

<!-- 引入element-ui组件库 -->
<script src="../../../plugins/element-ui/index.js"></script>

<!-- 引入axios -->
<script src="../../../plugins/axios/axios.min.js"></script>

<script>
    new Vue({
        el:'#app',    //element
        data:{

            userInfo:{}, //当前用户信息

            formData_update:{
                image:''
            },

            options1: [{
                value: '男',
                label: '男'
            },{
                value: '女',
                label: '女'

            },],

            imageUrl1:'',

        },
        created() {
            const userInfo = window.localStorage.getItem('user')
            console.log("userInfo1:::"+userInfo)
            if (userInfo) {
                this.userInfo = JSON.parse(userInfo)
            }
            console.log("userInfo2:::"+userInfo)
            this.getMyself(this.userInfo);



        },
        methods:{
            getMyself(row){

                axios.get("/users/getMyself/"+row.data.id).then((res)=>{
                    console.log("oookk")
                    console.log(res)
                    this.userInfo=res.data.data
                    this.formData_update=res.data.data

                    //修改localStorage的值
                    localStorage.setItem('admin',JSON.stringify(res.data))

                    this.imageUrl = `/files/downloadFile?name=${res.data.data.image}`
                })
            },

            //确定修改
            UpdateUsers(){
                axios.put("/users/updateUser",this.formData_update).then((res)=>{
                    if (res.data.code){
                        this.$message.success("修改个人信息成功")
                    }else{
                        this.$message.error("修改个人信息失败")
                    }
                }).finally(()=>{
                    // parent.window.location.reload();
                    // parent.window.location.reload();
                    this.getMyself();
                })
            },



            //4.图片文件上传
            handleAvatarSuccess (response, file, fileList) {
                this.formData_update.image=response.data
                // this.dishAddShow.avatar=<res className="data"></res>;

                this.imageUrl = `/files/downloadFile?name=${response.data}`

                console.log("response:")

                console.log(response)
            },
            beforeUpload (file) {
                if(file){
                    const suffix = file.name.split('.')[1]
                    const size = file.size / 1024 / 1024 < 2
                    if(['png','jpeg','jpg'].indexOf(suffix) < 0){
                        this.$message.error('上传图片只支持 png、jpeg、jpg 格式！')
                        this.$refs.upload.clearFiles()
                        return false
                    }
                    if(!size){
                        this.$message.error('上传文件大小不能超过 2MB!')
                        return false
                    }
                    return file
                }
            },
            getImage (image) {
                this.imageUrl1= `/files/downloadFile?name=${image}`
            },
            logout(){
                window.location.href='../../login/UserLogin.html';
            },

            toType(){
                window.location.href='type.html';
            },
        }

    })
</script>

</body>
</html>